import { useState } from 'react';
import { motion } from 'framer-motion';
import { toast } from 'sonner';

export default function SimpleTest() {
  const [systemPrompt, setSystemPrompt] = useState('You are chatting with me, your name is xiaoxi. Only reply in English.');
  const [userPrompt, setUserPrompt] = useState('');
  const [isProcessing, setIsProcessing] = useState(false);
  const [response, setResponse] = useState<any>(null);

  const testChatAPI = async () => {
    if (!userPrompt.trim()) {
      toast.error('请输入对话内容');
      return;
    }

    setIsProcessing(true);
    setResponse(null);

    try {
      // 模拟API调用
      const mockResponse = {
        success: true,
        message: `Hello! I'm xiaoxi. You said: "${userPrompt}". This is a mock response for testing.`,
        audio_data: 'mock_audio_data_base64_here'
      };

      // 模拟网络延迟
      await new Promise(resolve => setTimeout(resolve, 2000));

      setResponse(mockResponse);
      toast.success('对话完成（模拟）');
    } catch (error) {
      console.error('对话请求失败:', error);
      toast.error('对话请求失败');
    } finally {
      setIsProcessing(false);
    }
  };

  const testWebSocket = () => {
    toast.info('WebSocket功能需要后端服务支持');
  };

  return (
    <div className="min-h-screen bg-gradient-to-b from-blue-50 to-white py-8 px-4">
      <div className="max-w-4xl mx-auto">
        {/* 页面标题 */}
        <motion.div
          initial={{ opacity: 0, y: -20 }}
          animate={{ opacity: 1, y: 0 }}
          transition={{ duration: 0.5 }}
          className="text-center mb-8"
        >
          <h1 className="text-4xl font-bold text-gray-900 mb-4">语音对话系统 - 测试页面</h1>
          <p className="text-gray-600">测试前端功能，验证UI和交互</p>
        </motion.div>

        <div className="grid grid-cols-1 lg:grid-cols-2 gap-8">
          {/* 左侧：文本对话测试 */}
          <motion.div
            initial={{ opacity: 0, x: -20 }}
            animate={{ opacity: 1, x: 0 }}
            transition={{ duration: 0.5, delay: 0.2 }}
            className="bg-white rounded-xl shadow-lg p-6"
          >
            <h2 className="text-2xl font-semibold mb-4">文本对话测试</h2>
            
            {/* 系统提示词 */}
            <div className="mb-4">
              <label className="block text-sm font-medium text-gray-700 mb-2">
                系统提示词
              </label>
              <textarea
                value={systemPrompt}
                onChange={(e) => setSystemPrompt(e.target.value)}
                className="w-full p-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent"
                rows={3}
                placeholder="输入系统提示词..."
              />
            </div>

            {/* 用户输入 */}
            <div className="mb-4">
              <label className="block text-sm font-medium text-gray-700 mb-2">
                对话内容
              </label>
              <textarea
                value={userPrompt}
                onChange={(e) => setUserPrompt(e.target.value)}
                className="w-full p-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent"
                rows={4}
                placeholder="输入你想说的话..."
              />
            </div>

            {/* 发送按钮 */}
            <button
              onClick={testChatAPI}
              disabled={isProcessing || !userPrompt.trim()}
              className="w-full bg-blue-600 text-white py-3 px-6 rounded-lg font-medium hover:bg-blue-700 disabled:bg-gray-400 disabled:cursor-not-allowed transition-colors"
            >
              {isProcessing ? '处理中...' : '测试对话API'}
            </button>
          </motion.div>

          {/* 右侧：语音对话测试 */}
          <motion.div
            initial={{ opacity: 0, x: 20 }}
            animate={{ opacity: 1, x: 0 }}
            transition={{ duration: 0.5, delay: 0.4 }}
            className="bg-white rounded-xl shadow-lg p-6"
          >
            <h2 className="text-2xl font-semibold mb-4">语音对话测试</h2>
            
            <div className="text-center mb-6">
              <div className="w-24 h-24 mx-auto rounded-full bg-gray-400 flex items-center justify-center text-white text-2xl font-bold mb-4">
                🎙️
              </div>
              <p className="text-gray-600">
                点击测试语音对话功能
              </p>
            </div>

            <div className="space-y-3">
              <button
                onClick={testWebSocket}
                className="w-full bg-green-600 text-white py-3 px-6 rounded-lg font-medium hover:bg-green-700 transition-colors"
              >
                测试WebSocket连接
              </button>
              
              <button
                className="w-full bg-purple-600 text-white py-3 px-6 rounded-lg font-medium hover:bg-purple-700 transition-colors"
              >
                测试音频播放
              </button>
            </div>
          </motion.div>
        </div>

        {/* 响应结果显示 */}
        {response && (
          <motion.div
            initial={{ opacity: 0, y: 20 }}
            animate={{ opacity: 1, y: 0 }}
            transition={{ duration: 0.5, delay: 0.6 }}
            className="mt-8 bg-white rounded-xl shadow-lg p-6"
          >
            <h2 className="text-2xl font-semibold mb-4">API响应结果</h2>
            
            <div className="space-y-4">
              <div>
                <h3 className="text-lg font-medium text-gray-900 mb-2">AI回复:</h3>
                <p className="text-gray-700 bg-gray-50 p-3 rounded-lg">
                  {response.message}
                </p>
              </div>
              
              <div>
                <h3 className="text-lg font-medium text-gray-900 mb-2">音频数据:</h3>
                <p className="text-sm text-gray-500 bg-gray-50 p-3 rounded-lg font-mono">
                  {response.audio_data ? `${response.audio_data.substring(0, 50)}...` : '无音频数据'}
                </p>
              </div>
              
              <div>
                <h3 className="text-lg font-medium text-gray-900 mb-2">完整响应:</h3>
                <pre className="text-sm text-gray-700 bg-gray-50 p-3 rounded-lg overflow-x-auto">
                  {JSON.stringify(response, null, 2)}
                </pre>
              </div>
            </div>
          </motion.div>
        )}

        {/* 功能说明 */}
        <motion.div
          initial={{ opacity: 0, y: 20 }}
          animate={{ opacity: 1, y: 0 }}
          transition={{ duration: 0.5, delay: 0.8 }}
          className="mt-8 bg-blue-50 rounded-xl p-6"
        >
          <h2 className="text-xl font-semibold text-gray-900 mb-4">测试说明</h2>
          
          <div className="space-y-3 text-gray-700">
            <div className="flex items-start">
              <div className="flex-shrink-0 w-6 h-6 bg-blue-100 rounded-full flex items-center justify-center mr-3 mt-0.5">
                <span className="text-blue-600 text-sm font-bold">1</span>
              </div>
              <div>
                <p className="font-medium">文本对话测试</p>
                <p className="text-sm text-gray-600">模拟API调用，验证前端UI和状态管理</p>
              </div>
            </div>
            
            <div className="flex items-start">
              <div className="flex-shrink-0 w-6 h-6 bg-blue-100 rounded-full flex items-center justify-center mr-3 mt-0.5">
                <span className="text-blue-600 text-sm font-bold">2</span>
              </div>
              <div>
                <p className="font-medium">语音对话测试</p>
                <p className="text-sm text-gray-600">测试WebSocket连接和音频播放功能</p>
              </div>
            </div>
            
            <div className="flex items-start">
              <div className="flex-shrink-0 w-6 h-6 bg-blue-100 rounded-full flex items-center justify-center mr-3 mt-0.5">
                <span className="text-blue-600 text-sm font-bold">3</span>
              </div>
              <div>
                <p className="font-medium">响应显示</p>
                <p className="text-sm text-gray-600">展示API响应的完整结构，便于调试</p>
              </div>
            </div>
          </div>
        </motion.div>
      </div>
    </div>
  );
} 